<template>
    <component :is="config.layout.layoutMode"></component>
</template>

<script setup>
import { reactive } from 'vue'
import { useConfig } from '../../store/config'
import { useNavTabs } from '../../store/navTabs'
import { useSiteConfig } from '../../store/siteConfig'
import { useAdminInfo } from '../../store/adminInfo'
import { useRoute } from 'vue-router'
import Default from './container/default.vue'
import Classic from './container/classic.vue'
import Streamline from './container/streamline.vue'
import Double from './container/double.vue'
import { onMounted, onBeforeMount } from 'vue'
import { Session } from '../../utils/storage'
import { adminBaseRoutePath } from '../../router'
import router from '../../router/index'
import { useEventListener } from '@vueuse/core'

import { isEmpty } from 'lodash-es'
import { setNavTabsWidth } from '../../utils/layout'
//import { pulldata }  from '../../utils/testdatapull'
import { ElMessage } from 'element-plus'
import { callBackApi } from '../../api'
import { transformJson } from '../../utils/layout'

defineOptions({
    components: { Default,Classic,Streamline,Double },
})

const navTabs = useNavTabs()
const config = useConfig()
const route = useRoute()
const siteConfig = useSiteConfig()
const adminInfo = useAdminInfo()

const state = reactive({
    autoMenuCollapseLock: false,
})

onMounted(() => {
    //console.log(adminInfo.token)
    if (!adminInfo.token) return router.push({ name: 'login' })

    init()
    setNavTabsWidth()
    useEventListener(window, 'resize', setNavTabsWidth)
})
onBeforeMount(() => {
    onAdaptiveLayout()
    useEventListener(window, 'resize', onAdaptiveLayout)
})

const init = async () => {
    if (isEmpty(navTabs.state.tabsViewRoutes)) {
        let res = await callBackApi(
            'base/getMenu/',
            {},
            {loading:false},
            {}
        )
        if(res.code==200){
            navTabs.setTabsViewRoutes(transformJson(res.data))
        }else{
            ElMessage.error(res.msg)
        }
    }
    
}

const onAdaptiveLayout = () => {
    let defaultBeforeResizeLayout = {
        layoutMode: config.layout.layoutMode,
        menuCollapse: config.layout.menuCollapse,
    }
    let beforeResizeLayout = Session.get('beforeResizeLayout')
    if (!beforeResizeLayout) Session.set('beforeResizeLayout', defaultBeforeResizeLayout)

    const clientWidth = document.body.clientWidth
    if (clientWidth < 600) {
        /**
         * 锁定窗口改变自动调整 menuCollapse
         * 避免已是小窗且打开了菜单栏时，意外的自动关闭菜单栏
         */
        if (!state.autoMenuCollapseLock) {
            state.autoMenuCollapseLock = true
            config.setLayout('menuCollapse', true)
        }
        config.setLayout('shrink', true)
        config.setLayoutMode('Classic')
    } else {
        state.autoMenuCollapseLock = false
        let beforeResizeLayoutTemp = beforeResizeLayout || defaultBeforeResizeLayout

        config.setLayout('menuCollapse', beforeResizeLayoutTemp.menuCollapse)
        config.setLayout('shrink', false)
        config.setLayoutMode(beforeResizeLayoutTemp.layoutMode)
    }
}
</script>
